<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb>
      <el-breadcrumb-item>
        <i class="el-icon-s-home"></i>
        首页
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 首页 -->
    <div class="box">
      <!-- 三个 -->
      <div class="topdiv">
        <div class="topItem">
          <div class="topL">
            <i class="el-icon-user-solid" style="font-size: 30px; color: #fff;"></i>
          </div>
          <div class="topR">
            <p class="top1">34522</p>
            <p class="top2">商城用户</p>
          </div>
        </div>
        <div class="topItem">
          <div class="topL" style="background-color: #FFC53D;">
            <img style="width: 30px;margin-top: 20px;" src="../../assets/bxImg/home/cart.png" alt="">
          </div>
          <div class="topR">
            <p class="top1">345</p>
            <p class="top2">商城订单</p>
          </div>
        </div>
        <div class="topItem">
          <div class="topL" style="background-color: #42A7FF;">
            <i class="el-icon-s-data" style="font-size: 30px; color: #fff;"></i>
          </div>
          <div class="topR">
            <p class="top1">￥34,500</p>
            <p class="top2">交易记录</p>
          </div>
        </div>
      </div>
      <!-- 三个详情 -->
      <div class="mesDiv">
        <div class="mesItem">
          <p class="mesTop"><span style="padding: 0px 10px;">订单统计信息</span></p>
          <div class="meshen">
            <div style="padding: 0px 50px; display: flex;justify-content: space-between;">
              <p class="mesp1">代发货订单:</p>
              <p><span style="color: #FF9800;margin-right: 10px;">0</span>个</p>
            </div>
          </div>
          <div class="meshen">
            <div style="padding: 0px 50px; display: flex;justify-content: space-between;">
              <p class="mesp1">已发货订单:</p>
              <p><span style="color: #FF9800;margin-right: 10px;">10</span>个</p>
            </div>
          </div>
          <div class="meshen">
            <div style="padding: 0px 50px; display: flex;justify-content: space-between;">
              <p class="mesp1">待结算订单:</p>
              <p><span style="color: #FF9800;margin-right: 10px;">13</span>个</p>
            </div>
          </div>
          <div class="meshen">
            <div style="padding: 0px 50px; display: flex;justify-content: space-between;">
              <p class="mesp1">已成交订单数:</p>
              <p><span style="color: #FF9800;margin-right: 10px;">26</span>个</p>
            </div>
          </div>
          <div class="meshen1">
            <div style="padding: 0px 50px; display: flex;justify-content: space-between;">
              <p class="mesp1">交易失败:</p>
              <p><span style="color: #FF9800;margin-right: 10px;">30</span>个</p>
            </div>
          </div>
        </div>
        <div class="mesItem">
          <p class="mesTop"><span style="padding: 0px 10px;">商品统计信息</span></p>
          <div class="meshen">
            <div style="padding: 0px 50px; display: flex;justify-content: space-between;">
              <p class="mesp1">商品总数:</p>
              <p><span style="color: #FF9800;margin-right: 10px;">340</span>个</p>
            </div>
          </div>
          <div class="meshen">
            <div style="padding: 0px 50px; display: flex;justify-content: space-between;">
              <p class="mesp1">回收站商品:</p>
              <p><span style="color: #FF9800;margin-right: 10px;">10</span>个</p>
            </div>
          </div>
          <div class="meshen">
            <div style="padding: 0px 50px; display: flex;justify-content: space-between;">
              <p class="mesp1">上架商品:</p>
              <p><span style="color: #FF9800;margin-right: 10px;">13</span>个</p>
            </div>
          </div>
          <div class="meshen">
            <div style="padding: 0px 50px; display: flex;justify-content: space-between;">
              <p class="mesp1">下架商品:</p>
              <p><span style="color: #FF9800;margin-right: 10px;">26</span>个</p>
            </div>
          </div>
          <div class="meshen1">
            <div style="padding: 0px 50px; display: flex;justify-content: space-between;">
              <p class="mesp1">商品评论:</p>
              <p><span style="color: #FF9800;margin-right: 10px;">2145</span>条</p>
            </div>
          </div>
        </div>
        <div class="mesItem">
          <p class="mesTop"><span style="padding: 0px 10px;">最新消息</span></p>
          <div class="mesLin" v-for="item in 6">
            <i class="el-icon-bell" style="font-size: 20px; color: #f00;"></i>
            <p style="font-size: 13px; margin-left: 10px;">xxx会员购买了xxxxx商品</p>
          </div>
        </div>
      </div>
      <!-- 路由跳转 -->
      <div class="linkDiv">

        <div class="linkItem">
          <router-link to="/home/swiper">
            <img class="linkicon" src="../../assets/bxImg/home/link1.png" alt="">
            <p>首页轮播图</p>
          </router-link>
        </div>


        <div class="linkItem" style="background-color: #597CF4;">
          <router-link to="/home/navIcon">
            <img class="linkicon" src="../../assets/bxImg/home/link2.png" alt="">
            <p>导航图标</p>
          </router-link>
        </div>

        <div class="linkItem" style="background-color: #9253DF;">
          <router-link to="/home/shopRe">
            <img class="linkicon" src="../../assets/bxImg/home/cart.png" alt="">
            <p>商品推荐</p>
          </router-link>
        </div>
        <div class="linkItem" style="background-color: #42A7FF;">
          <router-link to="/home/announcement">
            <img class="linkicon" src="../../assets/bxImg/home/link4.png" alt="">
            <p>公告管理</p>
          </router-link>
        </div>
        <div class="linkItem" style="background-color: #73D13D;">
          <router-link to="/home/adress">
            <img class="linkicon" src="../../assets/bxImg/home/link5.png" alt="">
          <p>退货地址管理</p>
          </router-link>
        </div>
        <div class="linkItem" style="background-color: #ED8686;">
          <router-link to="/home/homeSort">
            <img class="linkicon" src="../../assets/bxImg/home/link6.png" alt="">
            <p>分类管理</p>
          </router-link>
        </div>
        <div class="linkItem" style="background-color: #EB0EF6">
          <router-link to="/home/addShop">
            <img class="linkicon" src="../../assets/bxImg/home/link7.png" alt="">
            <p>一键上传商品</p>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      
    };
  },
  methods: {},
  created() {
  },
  components: {}
}
</script>
<style scoped>
p {
  margin: 0;
  padding: 0;
}

.linkicon {
  width: 22px;
  margin-top: 15px;
}

.linkItem {
  width: 112px;
  border-radius: 5px;
  background-color: #36CFCA;
  text-align: center;
  color: #fff;
  font-size: 12px;
  line-height: 23px;
}

.linkDiv {
  width: 85%;
  height: 76px;
  margin-bottom: 20px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.mesLin {
  display: flex;
  padding: 5px 15px;
}

.meshen {
  width: 100%;
  height: 36px;
  border-bottom: 1px solid rgba(217, 217, 217, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 13px;
  line-height: 36px;
}

.meshen1 {
  width: 100%;
  height: 36px;
  border-radius: 0 0 5px 5px;
  color: rgba(16, 16, 16, 1);
  font-size: 13px;
  line-height: 36px;
}

.mesTop {
  width: 100%;
  height: 36px;
  border-radius: 5px 5px 0 0;
  font-weight: bold;
  border-bottom: 1px solid rgba(217, 217, 217, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  line-height: 36px;
  background-color: rgba(246, 246, 247, 1);
}

.mesItem {
  border: 1px solid rgba(217, 217, 217, 1);
  width: 276px;
  height: 100%;
  border-radius: 5px;
}

.mesDiv {
  margin-top: 18px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.top1 {
  font-size: 22px;
  margin-top: 16px;
}

.top2 {
  font-size: 12px;

}

.topR {
  width: 165px;
  height: 74px;
  color: rgba(89, 89, 89, 1);
  font-family: 方正兰亭黑-标准;
  text-align: center;
  border-radius: 0px 4px 4px 0px;
  border: 1px solid rgba(187, 187, 187, 1);
  background-color: #fff;
}

.topL {
  width: 111px;
  height: 100%;
  line-height: 76px;
  text-align: center;
  background-color: #36CFCA;
  border-radius: 4px 0px 0px 4px;
  ;
}

.topdiv {
  width: 100%;
  height: 76px;
  display: flex;
  justify-content: space-between;
}

.topItem {
  width: 276px;
  height: 100%;
  display: flex;
}

.box {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #eaeaea;
  margin-top: 20px;
}
</style>